<template>
    <div class="app">
        <div class="appname">
            <div class="titleName">
                <div class="left" @click="$router.go(-1)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <i class="el-icon-arrow-left"></i>
                    <span style="font-size: 16px;">搜索结果</span>&nbsp;&nbsp; <span style="font-size: 16px;">检索到 <span style="color:#0a7bf1;">{{collection_list.length}}</span> 条</span>
                </div>
                <div class="right">
                    <el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true" tab-position="bottom">
                        <el-tab-pane label="全部" name="first"></el-tab-pane>
                        <el-tab-pane label="FAQ" name="second"></el-tab-pane>
                        <el-tab-pane label="文档" name="third"></el-tab-pane>
                    </el-tabs>
                </div>
            </div>
            <div class="bodys">
                <div class="bodysLeft">
                    <el-descriptions :key="index" v-for="(item,index) in collection_list.slice((current - 1) * pageSize,current * pageSize)" :colon="false">
                        <el-descriptions-item>
                            <h3 @click="goDetail(item)" style="margin-top:20px; margin-left:5px"><i class="el-icon-s-management"></i>
                                <label v-if="item.contain == true">
                                    <font>{{item.start}}</font>
                                    <font class="intro" style="color:red">{{item.middle}}</font>
                                    <font>{{item.end}}</font>
                                </label>
                                <label v-else>
                                    {{item.content}}
                                </label>
                            </h3>
                        </el-descriptions-item>
                        <el-descriptions-item></el-descriptions-item>
                        <el-descriptions-item>
                            <div style="margin-top:20px;text-align: right;width:100%;margin-left:20px">{{item.time}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <div class="name" :style="{marginLeft:'20px',width:'750'+'px'}"> {{item.name}}</div>
                        </el-descriptions-item>
                        <el-descriptions-item></el-descriptions-item>
                        <el-descriptions-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <div style="margin-left:20px"> <span><img src="../assets/haoping.png" alt="" srcset="">10</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span><img src="../assets/chaping.png" alt="" srcset="">10</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>评论0</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>收藏0</span></div>
                        </el-descriptions-item>
                    </el-descriptions>
                    <div class="pagination">
                        <el-pagination layout="prev, pager, next" :page-size="pageSize" @current-change="handCurrentChange" :total="collection_list.length">
                        </el-pagination>
                    </div>
                </div>
                <div class="bodysRight">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <div class="icontitle">
                                <img class="icon" src="../assets/hot.png" alt="" />
                                <span>热点知识</span>
                            </div>
                        </div>
                        <div class="hotspot_list">
                            <div class="item" :key="index" v-for="(item,index) in collection_list">
                                <br v-if="index>0" />
                                <span class="title_name">{{ item.title }}</span> {{ item.content }}
                            </div>
                        </div>
                    </el-card>
                    <br />
                    <el-card class="box-card" v-if="getLogin">
                        <div slot="header" class="clearfix">
                            <div class="icontitle">
                                <img class="icon" src="https://img02.mockplus.cn/image/2022-11-06/773a0cf0-5daa-11ed-a972-c91595df0c22.png" alt="" />
                                <span>最近阅览</span>
                            </div>
                        </div>
                        <el-timeline>
                            <el-timeline-item v-for="(activity, index) in collection_list" :key="index" :timestamp="activity.time" placement="top">
                                <span class="title_name" v-if="index<8">{{ activity.title }}</span> {{ activity.content }}
                            </el-timeline-item>
                        </el-timeline>
                    </el-card>
                    <br />
                    <el-card class="box-card" v-if="getLogin">
                        <div slot="header" class="clearfix">
                            <div class="icontitle">
                                <img class="icon" src="https://img02.mockplus.cn/image/2022-11-06/5b3827e0-5da4-11ed-b8f2-7327e0cd9107.png" alt="" />
                                <span>热点知识</span>
                            </div>
                        </div>
                        <div class="hotspot_list">
                            <div class="item" :key="index" v-for="(item,index) in collection_list">
                                <br v-if="index>0" />
                                <span class="title_name">{{ item.title }}</span> {{ item.content }}
                            </div>
                        </div>
                    </el-card>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import request from "@/utils/request";
import Utils from '@/utils/utils.js';  
export default {
data() {
  return {
    activeName: 'first',
      collection_list: [],
      current: 1,
      pageSize: 8,
      width: 750,
      name:''
        }
    },
    mounted(){  
    var that = this;  
    Utils.$on('demo', function (msg) {  
        that.name=msg
        that.collection_list.map((item,index)=>{
            that.signKeyword(item.content,index)
})
    })  
},  
  created() {
    this.getCollectionList()
  },
  computed: {
    ...mapGetters(["getdetail",'getLogin']),
    value: {
      get() {
        return this.getdetail;
      },
    
    },
  },
  methods: {
    ...mapMutations(["setdetail"]),
      handleClick() { },
 
      conmfigWidth() { 
          let width = document.getElementsByClassName('bodysLeft')
          if (width) {
              this.width = width[0].clientHeight - 100
          } else { 
            this.width = 700
          }
      },
  async getCollectionList() {
    const res = await request.get("/collection/list");
      console.log(res.data);
      this.collection_list = res.data;
      this.conmfigWidth()
   
    },
    goDetail(data) { 
   this.setdetail(data)
    this.$router.push('/Detail')
      },
      handCurrentChange(current) {
      this.current = current;
      },
      signKeyword (val,index) {
          let keyword = this.name  //搜索的值
 
		if (val.indexOf(keyword) !== -1) {
			// 包含字符前面的下标
			let pre = val.indexOf(keyword)
			// 包含字符的长度
        
			let end = keyword.length
            this.collection_list[index].contain = true
            let params = {
                start: val.slice(0,pre),
                middle:keyword,
                end:val.substr(pre + end)
            }
			// 截取之后的字符（包含字符前面的下标+包含字符的长度 = 包含字符之后的下标）
            this.collection_list.splice(index,1,{
                ...this.collection_list[index],
                ...params
            })
            this.$forceUpdate() 
            console.log('====================================');
            console.log( this.collection_list[index] );
            console.log('====================================');
			
		} else {
			this.collection_list[index].contain = false
		}
	},

},
}
</script>
<style scoped>
.intro {
    color: red;
}
.app {
    overflow-x: auto;
    background-color: #e9e9e9;
}
.appname {
    margin-bottom: 180px;
}
.pagination {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}
.name {
    text-align: left;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.title_name {
    color: #999;
}
.icontitle {
    display: flex;
    align-items: center;
    vertical-align: middle;
}
.icon {
    width: 30px;
    height: 30px;
    margin-right: 5px;
}
.app {
    width: 100%;
    height: 100%;
}
.titleName {
    width: 100%;
    height: 50px;
    background-color: #e9e9e9;
    display: flex;
}
.left {
    font-size: 20px;
    line-height: 50px;
    width: 30%;
    text-align: left;
}
.right {
    width: 40%;
    line-height: 50px;
}
.bodys {
    width: 100%;
    height: 90%;
    background-color: #f8f8f8;
    display: flex;
    overflow-x: hidden;
}
.bodysLeft {
    flex: 7;

    padding: 10px;
}
.bodysRight {
    flex: 3;
    padding: 10px;
}
</style>
